<template>
  <view class="container">
	<u-subsection :list="list" :current="current" fontSize="16" @change="changeIndex"></u-subsection>	
	<view class="addStore">
		<!-- 分类 -->
		<view class="addStore-list" v-if="current==0">
			<view class="addStore-list-item" style="border:none;">
				<view class="addStore-list-item-leftContent">分类编号:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入分类编号" border="none" v-model="classCode" inputAlign="right"></u--input>
				</view>
			</view>
			<view class="addStore-list-item" style="border:none;">
				<view class="addStore-list-item-leftContent">分类名称:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入分类名称" border="none" v-model="className" inputAlign="right"></u--input>
				</view>
			</view>
		</view>
		<!-- 货品 -->
		<view class="addStore-list" v-if="current==1">
			<view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">货品编号:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入货品编号" border="none" v-model="productData.matCode" inputAlign="right"></u--input>
				</view>
			</view>
			<view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">货品名称:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入货品名称" border="none" v-model="productData.matName" inputAlign="right"></u--input>
				</view>
			</view>
			<view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">货品描述:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入货品描述" border="none" v-model="productData.fdCode" inputAlign="right"></u--input>
				</view>
			</view>
			<view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">货品图片:</view>
				<view class="addStore-list-item-input">
					<uploadImage :maxCount="1" @setleaveUnusedImage='setleaveUnusedImage'></uploadImage>
				</view>
			</view>
			
			<view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">货品单位:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入货品单位" border="none" v-model="productData.unitCode" inputAlign="right"></u--input>
				</view>
			</view>
			<view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">货品规格:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入货品规格" border="none" v-model="productData.matGroup" inputAlign="right"></u--input>
				</view>
			</view>
			<view class="addStore-list-item" style="border-bottom:2rpx solid #F2F2F2;" @click="isShowArea=true">
				<view class="addStore-list-item-leftContent">货品分类:</view>
				<view class="addStore-list-item-input">
					<view class="" style="color: black;" v-if="productClassName">
						{{productClassName}}
					</view>
					<view v-if="!productClassName">
						<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
					</view>
					<view class="" v-if="!productClassName">
						请选择货品分类
					</view>
				</view>
			</view>
		</view>
		<view class="footerBtn" @click="confirmInfo">
			提交
		</view>
		<u-picker :show="isShowArea" :columns="areaList" :defaultIndex="[0]" :immediateChange="true" keyName="name" ref="uPicker" @cancel="isShowArea=false" @confirm="changeArea"></u-picker>
	</view>
	<u-loading-page :loading="isShowLoading" bg-color="rgba(4,4,15,0.4000)">加载中...</u-loading-page>
  </view>
</template>
<script>
	import {submitClassification,submitGoods,getBaseMatClass} from "@/api/otherTaskApi.js";
	export default {
		data() {
			return {
				list: ['分类', '货品'],
				current: 0,
				name:null,
				isShowLoading:false,
				isShowArea:false,
				areaList:[],
				fileList1:[],
				classCode:null,
				className:null,
				productData:{
					matCode:null,
					matName:null,
					fdCode:null,
					figNum:null,
					unitCode:null,
					matGroup:null,
					matClass:null
				},
				productClassName:null
			}
		},
		onLoad() {

		},
		onShow() {
			this.getBaseMatClass();
		},
		methods: {
			async getBaseMatClass(){
				this.isShowLoading = true;
				let res = await getBaseMatClass();
				if(res.code==200){
					this.areaList = [];
					let str = res.data.map((element) => ({ classCode: element.classCode,name: element.className }));
					this.areaList.push(str);
					this.isShowLoading = false;
				}
			},
			changeArea(e){
				this.productClassName = e.value[0].name;
				this.productData.matClass = e.value[0].classCode;
				this.isShowArea = false;
			},
			changeIndex(index){
				if(index==0){
					this.classCode = null;
					this.className = null;
				}else{
					this.productData.matCode=null;
					this.productData.matName=null;
					this.productData.fdCode=null;
					this.productData.figNum=null;
					this.productData.unitCode=null;
					this.productData.matGroup=null;
					this.productData.matClass=null
				}
				this.current = index;
			},
			confirmInfo(){
				if(this.current==0){
					this.submitClassification();
				}else{
					this.submitGoods();
				}
			},
			async submitClassification(){
				this.isShowLoading = true;
				let data = {
					classCode:this.classCode,
					className:this.className
				}
				let res = await submitClassification(data);
				if(res.code==200){
					this.isShowLoading = false;
					this.changeIndex(0);
					uni.showToast({ title: '提交成功', icon: 'none' });
				}else{
					this.isShowLoading = false;
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},
			async submitGoods(){
				this.isShowLoading = true;
				let res = await submitGoods(this.productData);
				if(res.code==200){
					this.isShowLoading = false;
					this.changeIndex(1);
					this.productClassName = null;
					uni.showToast({ title: '提交成功', icon: 'none' });
				}else{
					this.isShowLoading = false;
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},
			setleaveUnusedImage(content){
				this.productData.figNum = content[0].url;
			}
		}
	}
</script>

<style lang="scss">
	.addStore{
		&-list{
			width:100%;
			margin-top:40rpx;
			&-item{
				width: 100%;
				// height:88rpx;
				margin:0 auto;
				padding:20rpx 30rpx;
				box-sizing: border-box;
				border-top:2rpx solid #F2F2F2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&-leftContent{
					font-size: 30rpx;
					font-weight: 600;
					width:40%;
				}
				&-input{
					flex:1;
					text-align: right;
					color:#cccfd6;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					flex-direction: row-reverse;
				}
			}
			
		}
		.footerBtn{
			width:580rpx;
			margin:0 auto;
			padding:15rpx 0;
			background: #478cbd;
			text-align: center;
			color: white;
			border-radius: 50rpx;
			margin-top:70rpx;
			margin-bottom:180rpx;
		}
	}
</style>
